<template>
    <view>
        <view class="main">
            <view class="h1">
                {{$lang('您确定本次订单需要生产的')}}“
                <text v-for="(item,index) in ruleForm.list" :key="index">{{item.goods_code}} {{item.num}}{{$lang('份')}}</text>
                ”{{$lang('已经全部完成生产')}}。
            </view>
            <view class="assemInfoMain">
                <uni-forms :modelValue="ruleForm" :rules="rules" ref="ruleForm" label-width="0" validateTrigger="blur">
                    <view v-for="(item,index) in ruleForm.list" :key="index">
                        <view class="h2">{{item.goods_code}}</view>
                        <uni-forms-item :name="'list.' + index + '.warehouse_name'" :rules="rules.warehouse_name.rules">
                            <view class="li">
                                <view class="fl"><text class="red">*</text>{{$lang('入库仓库')}}：</view>
                                <view class="fr">
                                    <input type="text" v-model="item.warehouse_name" :placeholder="$lang('请选择入库仓库')">
                                    <image src="../../static/images/icon13.png"></image>
                                    <view class="hideBox" @click="produceWarehouseListFun(1,index)"></view>
                                </view>
                            </view>
                        </uni-forms-item>
                        <uni-forms-item v-if="item.warehouse_id" :name="'list.' + index + '.goods_shelves_name'" :rules="rules.warehouse_name.rules">
                            <view class="li">
                                <view class="fl"><text class="red">*</text>{{$lang('关联货位')}}：</view>
                                <view class="fr">
                                    <input type="text" v-model="item.goods_shelves_name" :placeholder="$lang('请选择关联货位')">
                                    <image src="../../static/images/icon13.png"></image>
                                    <view class="hideBox" @click="produceGoodsShelvesListFun(2,index,item)"></view>
                                </view>
                            </view>
                        </uni-forms-item>
                    </view>
                </uni-forms>
            </view>
        </view>
        <view class="footerFen"></view>
        <view class="footer">
            <view class="top">
                <view class="fl" @click="$common.back()">{{$lang('取消')}}</view>
                <view class="fr" @click="submit">{{$lang('确定')}}</view>
            </view>
        </view>
        <u-picker
                :show="pickerShow"
                :columns="pickerColumns"
                @close="pickerShow = false"
                @cancel="pickerShow = false"
                @confirm="pickerConfirm"
                :keyName="keyName"
                closeOnClickOverlay
        ></u-picker>
    </view>
</template>

<script>
    import {
        produceStorePageData,
        produceWarehouseList,
        produceGoodsShelvesList,
        produceStore
    } from '../../api/api'
    export default {
        data() {
            return {
                ruleForm:{
                    list:[]
                },
                rules:{},
                pickerShow:false,
                pickerColumns:[],
                keyName:'',
                type:'',
                index:''
            }
        },
        onLoad(options) {
            this.ruleForm.id = options.id;
            uni.setNavigationBarTitle({
                title: this.$lang('入库')
            });
            this.produceStorePageDataFun();
        },
        methods: {
            submit(){
                this.$refs.ruleForm.validate().then(valid => {
                    produceStore(this.ruleForm).then(res => {
                        if(res.code == 1){
                            uni.showToast({
                                title:this.$lang('入库提交成功'),
                                icon:'none'
                            });
                            setTimeout(() => {
                                this.$common.back();
                                uni.$emit('returnData',1);
                            },500)
                        } else{
                            uni.showToast({
                                title:res.msg,
                                icon:'none'
                            })
                        }
                    })
                }).catch(err => {

                })
            },
            produceGoodsShelvesListFun(type,index,item){
                produceGoodsShelvesList({
                    id:item.warehouse_id
                }).then(res => {
                    this.type = type;
                    this.index = index;
                    this.pickerColumns = [];
                    this.pickerColumns.push(res.data);
                    this.keyName = 'name';
                    this.pickerShow = true;
                })
            },
            produceWarehouseListFun(type,index){
                produceWarehouseList().then(res => {
                    this.type = type;
                    this.index = index;
                    this.pickerColumns = [];
                    this.pickerColumns.push(res.data);
                    this.keyName = 'name';
                    this.pickerShow = true;
                })
            },
            pickerConfirm(e){
                if(this.type == 1){
                    this.ruleForm.list[this.index].warehouse_name = e.value[0].name;
                    this.ruleForm.list[this.index].warehouse_id = e.value[0].id;
                } else if(this.type == 2){
                    this.ruleForm.list[this.index].goods_shelves_name = e.value[0].name;
                    this.ruleForm.list[this.index].goods_shelves_id = e.value[0].id;
                }
                this.pickerShow = false;
            },
            produceStorePageDataFun(){
                produceStorePageData({
                    id:this.ruleForm.id
                }).then(res => {
                    this.ruleForm.list = res.data.factory_produce_goods;
                    this.ruleForm.list.forEach(item => {
                        item.item_id = item.id
                    });
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .main{
        padding: 20rpx;
        .h1{
            font-size: 24rpx;
            color: #f55200;
        }
        .assemInfoMain{
            padding: 30rpx;
            .h2{
                display: flex;
                align-items: center;
                font-size: 32rpx;
                color: #222;
                margin-bottom: 10rpx;
            }
            .li{
                display: flex;
                flex-direction: column;
                .fl{
                    font-size: 32rpx;
                    color: #222;
                }
                .fr{
                    display: flex;
                    align-items: center;
                    position: relative;
                    min-height: 90rpx;
                    border: 1px solid #747474;
                    padding: 0 33rpx;
                    border-radius: 10rpx;
                    margin-top: 15rpx;
                    .frTop{
                        display: flex;
                        align-items: center;
                        position: relative;
                        min-height: 90rpx;
                    }
                    input{
                        font-size: 32rpx;
                        color: #222;
                        padding-right: 15rpx;
                        width: 100%;
                    }
                    image{
                        width: 60rpx;
                        height: 60rpx;
                        &.rotate180{
                            transform: rotateZ(180deg);
                        }
                    }
                    .stockList{
                        padding-bottom: 20rpx;
                        .listLi{
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            height: 90rpx;
                            background: #eff2f8;
                            border-radius: 10rpx;
                            padding: 0 50rpx;
                            .listLiFl{
                                display: flex;
                                align-items: center;
                                text{
                                    font-size: 30rpx;
                                    color: #365aa6;
                                }
                                input{
                                    width: 80rpx;
                                    margin: 0 15rpx;
                                    border-bottom: 1px solid #365aa6;
                                    text-align: center;
                                    font-size: 30rpx;
                                    color: #365aa6;
                                }
                            }
                            .listLiFr{
                                image{
                                    width: 22rpx;
                                    height: 22rpx;
                                    vertical-align: middle;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .footerFen{
        height: 179rpx;
    }
    .footer{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 24rpx 24rpx 45rpx 24rpx;
        background: #fff;
        .top{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .fl{
                width: 280rpx;
                height: 90rpx;
                border-radius: 90rpx;
                text-align: center;
                line-height: 90rpx;
                font-size: 36rpx;
                color: #555;
                border: 1px solid #c9c9c9;
            }
            .fr{
                width: 400rpx;
                height: 90rpx;
                border-radius: 90rpx;
                text-align: center;
                line-height: 90rpx;
                background: #365aa6;
                color: #fff;
                font-size: 36rpx;
            }
        }
    }
</style>
